<template>
  <el-button :size="props.size" type="primary" @click="openClick">新增子项</el-button>
  <el-dialog v-model="openAdd" title="新增"
             @close="resetForm"
             append-to-body
             width="60%">
    <avue-form
        ref="formRef"
        :option="menuFormOption"
        @submit="submit"
        v-model="form"></avue-form>
  </el-dialog>
</template>

<script setup>
import {menuFormOption} from "@/views/system/menu/js/MenuOptions.js";
import {defineEmits, ref} from 'vue';
import {menuSave} from "@/views/system/menu/js/menuRequest.js";
import {ElMessage} from "element-plus";
import Func from "@/utils/Utils.js";

const emit = defineEmits(['reflashPage'])
const props = defineProps({
  parentId: {
    type: String,
    default: ''
  },
  size: {
    type: String,
    default: 'default'
  }
})

const openClick = () => {
  if (Func.isEmpty(props.parentId.length)) {
    ElMessage.warning("请先选择父菜单")
    return
  }
  openAdd.value = true
}

const formRef = ref(null)
const form = ref({});
const openAdd = ref(false)

const success = ref(false)

const resetForm = () => {
  formRef.value.resetForm()
}

const submit = (form, done) => {
  form.parentId = props.parentId
  menuSave(form).then(res => {
    if (res.success) {
      success.value = true
    }
  }).finally(() => {
    if (success.value) {
      openAdd.value = false
      resetForm()
    }
    emit('reflashPage')
    done()
  })
}
</script>

<style scoped>

</style>